<!-- 工艺明细 -->
<template>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item>
        <el-text>工位动作管理 : {{ row.name }} </el-text>
      </el-form-item>
      <el-form-item>
       
      </el-form-item>
    </el-form>
  
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="search" @click="handleQuery">刷新</el-button>
        <el-button type="primary" plain icon="plus" @click="handleAdd" >新增数据</el-button>
       
      </el-col>
    </el-row>
    <el-table :data="dataList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="动作名称" align="center" prop="name" />
      <el-table-column label="动作类型" align="center" prop="actionType">
        <template #default="scope">
          <dict-tag :options="listTypeOptions" :config="{label: 'label', value: 'value'}"  :value="[scope.row.type]" />
        </template>
      </el-table-column>
      <el-table-column label="DB" align="center" prop="blockDb" />
      <el-table-column label="数据编号" align="center" prop="dataId"  />
      <el-table-column label="设定值" align="center" prop="configValue"  />
      
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
        <template #default="scope">
          <div v-if="scope.row.id > 0">
            <el-button text size="small" icon="edit" @click="handleUpdate(scope.row)" >编辑</el-button>
            <el-button text size="small" icon="delete" @click="handleDelete(scope.row)" >删除 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" v-model="open" draggable width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <!-- <el-col :lg="12">
            <el-form-item label="工位名称">
              <el-input v-model="form.stationName" :disabled="true" />
            </el-form-item>
          </el-col> -->

          <el-col :lg="12">
            <el-form-item label="ActionId" prop="actionId">
              <el-input v-model="form.actionId" placeholder="动作Id" />
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="动作类型" prop="type">
              <el-select v-model="form.type">
                <el-option v-for="item in listTypeOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="动作名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          
          
          <el-col :lg="12">
            <el-form-item label="备注" prop="notes">
              <el-input v-model="form.notes" placeholder="备注" />
            </el-form-item>
          </el-col>
          
         
          
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script setup name="dictData">
  import { listCksTechniqueDetails, getCksTechniqueDetails, delCksTechniqueDetails, addCksTechniqueDetails, updateCksTechniqueDetails,addCksTechniqueLog } from '@/api/business/ckstechniquedetails'
    import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data'
  import { listType, getType } from '@/api/system/dict/type'
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    techId: {
      type: Number,
      default: 0
    },
    row:{
      type:Object,
      default:{
        name:'',
        code:''
      }
    }
  })

  const ids = ref()
  const loading = ref(false)

  

  // 总条数
  const total = ref(0)
  // 字典表格数据
  const dataList = ref([])
  // 默认字典类型
  const defaultDictType = ref('')
  // 弹出层标题
  const title = ref('')
  // 是否显示弹出层
  const open = ref(false)
  // 数据标签回显样式
  const listTypeOptions = ref([
    {
      value: 1,
      label: '下发工艺->PLC',
      listClass:'info'
    },
    {
      value: 2,
      label: '上传工艺->Upper',
       listClass:'success'
    }
  ])
  
 
  // 状态数据字典
  const statusOptions = ref([])
  // 类型数据字典
  const typeOptions = ref([])
  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    dictName: undefined,
    dictType: undefined,
    status: undefined
  })
  // 表单参数
  
  const formRef = ref()
  const state = reactive({
    form: {
      techniqueId: props.techId
    },
    rules: {
      blockDb: [{ required: true, message: '不能为空', trigger: 'blur' }],
      name: [{ required: true, message: '不能为空', trigger: 'blur' }],
      dataId: [{ required: true, message: '不能为空', trigger: 'blur' }],
      configValue: [{ required: true, message: '不能为空', trigger: 'blur' }],
      langKey: [{ pattern: /^[A-Za-z].+$/, message: '输入格式不正确,格式：login.ok', trigger: 'blur' }]
    }
  })
  
  const { form, rules } = toRefs(state)
  /** 查询字典类型详细 */
  function getTypeInfo(techId) {
    getType(techId).then((response) => {
      queryParams.dictType = response.data.dictType
      defaultDictType.value = response.data.dictType
      getList()
    })
  }
  /** 查询字典类型列表 */
  function getTypeList() {
    listType().then((response) => {
      typeOptions.value = response.data.result
    })
  }
  
  /** 查询字典数据列表 */
  function getList() {
    loading.value = true
    queryParams.techniqueId = props.techId
    listCksTechniqueDetails(queryParams).then((response) => {
      dataList.value = response.data.result
      total.value = response.data.totalNum
      loading.value = false
    })
  }
  
  // 取消按钮
  function cancel() {
    open.value = false
    reset()
  }
  // 表单重置
  function reset() {
    form.value = {
      
      name: undefined,
      actionType: undefined,
      actionId: undefined,
      notes:undefined,
      stationName: props.row.name,
      stationId:props.row.id,
      id:0
    }
    proxy.resetForm('formRef')
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.pageNum = 1
    getList()
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm('queryForm')
    queryParams.dictType = defaultDictType.value
    handleQuery()
  }
  /** 新增按钮操作 */
  function handleAdd() {
    reset()
    open.value = true
    title.value = '添加数据'
    form.value.dictType = queryParams.dictType
  }
  // 多选框选中数据
  // function handleSelectionChange(selection) {
  //   this.ids = selection.map((item) => item.dictCode)
  //   this.single = selection.length != 1
  //   this.multiple = !selection.length
  // }
  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset()
   
    getCksTechniqueDetails(row.id).then((response) => {
      form.value = response.data
      open.value = true
      title.value = '修改数据'
    })
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs['formRef'].validate((valid) => {
      if (valid) {
        if (form.value.id >0 ) {
          updateCksTechniqueDetails(form.value).then((response) => {
            proxy.$modal.msgSuccess('修改成功')
            open.value = false
            getList()
          })
        } else {
          addCksTechniqueDetails(form.value).then((response) => {
            proxy.$modal.msgSuccess('新增成功')
            open.value = false
            getList()
          })
        }
      }
    })
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    const dictCodes = row.id || ids.value
    proxy
      .$confirm('是否确认删除当前数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(function () {
        return delCksTechniqueDetails(dictCodes)
      })
      .then(() => {
        getList()
        proxy.$modal.msgSuccess('删除成功')
      })
  }

  watch(
    () => props.techId,
    (newVal, oldValue) => {
      if (newVal) {
         
        //查询工艺明细 
        getList()
      }
    },
    {
      immediate: true,
      deep: true
    }
  )
  




  </script>
  